<template>
	<w-layout showNavbar navTitle="优惠券商城" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<view class="px-70">
					<up-tabs
						@change="tabChange"
						:list="tabs.list" 
						:current="tabs.current"
						lineWidth="14"
						lineHeight="14"
						:lineColor="`url('/static/icon/public/top-fill.png') 100% 100%`"
						:activeStyle="{
							color: publicStyles['--color'],
							fontWeight: 'bold',
							transform: 'scale(1.2)'
						}"
						:scrollable="false"
						itemStyle="height: 60px;"
						:inactiveStyle="{
							'font-size': '32rpx',
						}"
					>
					</up-tabs>
				</view>
				
				<view class="public-card-3 fr-ac py-30 mt-30" v-for="(item,index) in state.list" :key="index">
					<view class="w-30 fc-ac">
						<view class="color">
							<text class="fs-32">￥</text>
							<text class="fs-46">{{item.price}}</text>
						</view>
						<view class="fs-24 mt-10">
							满{{item.man_price}}可用
						</view>
					</view>
					<view v-if="tabs.current == 0" class="ml-30">
						<view class="color">
							{{item.title}}
						</view>
						<view class="op-90 fs-24 mt-10">
							{{item.goods_title}}
						</view>
						<view class="fs-24 op-50 mt-10">
							{{item.start_time}}起可购买 
						</view>
						<view class="fs-24 op-50 mt-10">
							{{item.end_time}}结束购买
						</view>
					</view>
					<view v-if="tabs.current == 1" class="ml-30">
						<view class="color">
							{{item.title}}
						</view>
						<view class="op-90 fs-24 mt-10">
							{{item.goods_title}}
						</view>
						<view class="fs-24 op-50 mt-10">
							{{item.end_time}}到期
						</view>
					</view>
					<view v-if="tabs.current == 2" class="ml-30">
						<view class="color">
							{{item.title}}
						</view>
						<view class="op-90 fs-24 mt-10">
							{{item.goods_title}}
						</view>
						<view class="fs-24 op-50 mt-10">
							{{item.end_time}}到期
						</view>
					</view>
					<view v-if="state.type == 'pay'? false:(tabs.current == 0)" @click="openPayment(item)" class="color bold fs-36 ml-auto mr-35">
						购买
					</view>
					<view v-if="state.type == 'pay'? (tabs.current == 0):(tabs.current == 1)" @click="useCoupon(item)" class="color bold fs-36 ml-auto mr-35">
						使用
					</view>
					<view v-if="state.type == 'pay'? (tabs.current == 1):(tabs.current == 2)" class="op-70 ml-auto mr-35 fs-24">
						{{'不可用'}}
					</view>
				</view>
				<no-more :show="state.list.length == 0"></no-more>
				
				
				<up-popup :show="popup.showPayment" @close="popup.showPayment = false" mode="bottom" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="fc-ac px-50" style="position: relative;min-height:700rpx;background: linear-gradient(to bottom, #17404D 0%, #001524 100%);">
						<view class="w-100" style="position: absolute;top: 0;left: 0;height: 2px;background: linear-gradient(to right, #184250 0%, #4EB5C8 25% , #E4FBFF 50% , #4EB5C8 75% , #184250 100%);"></view>
						<image style="width: 100%;height: 32rpx;min-height: 32rpx;" src="/static/icon/public/base-popup.png" mode=""></image>
						<view class="color pt-60 fs-36 t-c">
							购买优惠券
						</view>
						
						<view class="w-100 public-card-3 fr-ac py-30 mt-60">
							<view class="w-30 fc-ac">
								<view class="color">
									<text class="fs-32">￥</text>
									<text class="fs-46">{{state.pay_info.price}}</text>
								</view>
								<view class="fs-24 mt-10">
									满{{state.pay_info.man_price}}可用
								</view>
							</view>
							<view class="ml-30">
								<view class="color">
									{{state.pay_info.title}}
								</view>
								<view class="op-90 fs-24 mt-10">
									{{state.pay_info.goods_title}}
								</view>
							</view>
							<view class="op-70 ml-auto mr-35 fs-24">
								限购{{state.pay_info.max}}张
							</view>
						</view>
						
						<view class="w-100 fr-ac u-border-bottom pb-30 mt-40" style="border-color: var(--gray-line) !important;">
							<image style="width: 40rpx;height: 40rpx;" src="/static/icon/public/yuan-bao.png" mode=""></image>
							<view class="flex-1 mx-20">
								<text class="op-90">需消耗精粹</text>
								<text class="color mx-10">{{NeedPrice}}</text>
								<text class="op-90">个</text>
							</view>
							<up-number-box
								:min="0"
								:max="state.pay_info.max"
								v-model="state.pay_info.buy_num" 
								@change="valChange($event)"
								button-size="36"
								:color="publicStyles['--color']"
								bgColor="transparent"
								inputWidth="15"
								:iconStyle="{
									'color': publicStyles['--color'],
									'background': 'transparent',
								}"
							>
							</up-number-box>
						</view>
						<view class="fr-ac gap-40 w-100 mt-100">
							<view @click="popup.showPayment = false;" class="public-btn-7 transition py-25 t-c mb-60 flex-1">
								<view class="op-90 fs-32">
									取消
								</view>
							</view>
							<view @click="get_pay_coupon" class="public-btn-4 transition py-25 t-c mb-60 flex-2">
								<view class="text-color-b fs-32">
									支付
								</view>
							</view>
						</view>
					</view>
				</up-popup>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		getJumpData
	} from '@/common/common'
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick,
		getCurrentInstance
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		pay_coupon,
		coupon_integral,
		used
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	const CurrentInstance = getCurrentInstance()
	
	onLoad(async(options) => {
		state.total_price = options.total_price
		state.state = options.state
		state.goods_id = options.goods_id
		if(options.type == 'pay'){
			tabs.list = [
				{
					id:1,
					name:'可使用',
				},
				{
					id:0,
					name:'不可用',
				}
			]
		}else{
			tabs.list = [
				{
					id:1,
					name:'可购买',
				},
				{
					id:2,
					name:'可使用',
				},
				{
					id:3,
					name:'不可用',
				}
			]
		}
		state.type = options.type
		loadData()
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	onReachBottom(()=>{
		if(state.last_limit == state.limit){
			state.page++
			loadData()
		}
	})
	const page = reactive({
		scrollTop:0
	})
	
	const popup = reactive({
		showPayment:false,
	})
	
	const state = reactive({
		list:[],
		page:1,
		limit:15,
		last_limit:15,
		
		pay_info: {},
		
		type: '',
		total_price: '',
		state: '',
		goods_id: '',
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 15
	}
	function loadData(){
		if(state.type == 'pay'){
			get_used()
		}else{
			get_coupon_integral()
		}
	}
	
	const tabs = reactive({
		current:0,
		list:[]
	})
	function tabChange(e){
		tabs.current = e.index
		console.log(tabs.current)
		initData()
		loadData()
	}
	
	async function get_coupon_integral(){
		const res = await coupon_integral({
			type: tabs.list[tabs.current].id,
			page: state.page
		})
		state.last_limit = res.coupon_list.list.length
		state.list = state.list.concat(res.coupon_list.list)
	}
	
	async function get_used(){
		const res = await used({
			total_price: state.total_price,
			type: 0,
			type1: tabs.list[tabs.current].id,
			state: state.state,
			goods_id: state.goods_id,
			page: state.page
		})
		state.last_limit = res.data.length
		state.list = state.list.concat(res.data)
	}
	
	function openPayment(item){
		state.pay_info = item
		state.pay_info.buy_num = 1
		popup.showPayment = true
	}
	async function get_pay_coupon(){
		if(!state.pay_info.buy_num){
			return uni.$u.toast('至少购买一张')
		}
		const res = await pay_coupon({
			coupon_id: state.pay_info.id,
			buy_num: state.pay_info.buy_num
		})
		popup.showPayment = false
		initData()
		await get_coupon_integral()
		uni.$u.toast('购买成功！')
	}
	
	const NeedPrice = computed(()=>{
		let num = 0
		num = state.pay_info.integral * state.pay_info.buy_num
		return num
	})
	
	
	// 数量选择
	function valChange(e){
		state.pay_info.buy_num = e.value
	}
	
	// 使用
	function useCoupon(item){
		if(state.type == 'pay'){
			uni.navigateBack({
				delta:1,
				success: () => {
					getJumpData.apply(CurrentInstance.proxy,['emit','chooseCoupon',item])
				}
			})
		}else{
			uni.navigateTo({
				url: '/pages/index/index'
			})
		}
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 40rpx;
		
	}
	
	.login-btn {
		color: white !important;
		background: var(--color) !important;
		border-radius: 12rpx !important;
	}
	
	::v-deep .u-number-box__minus,.u-number-box__plus{
		background-color: transparent !important;
	}
</style>